import React, { useEffect, useState } from "react";
// import "../../node_modules/jexcel/dist/jexcel.css";
import jexcel from "jexcel";
import { Space } from "antd";
import { PageWrapper } from "@/components/PageWrapper";
import styles from './index.less'
import SpreExam from './components/spreadjs'

let el: jexcel.JExcelElement; //函数体外部定义
const CusXlsx = () => {
  let jexcelDom: HTMLDivElement;

  useEffect(() => {
    el = jexcel(jexcelDom, options);
    //第一个参数是被挂载的dom节点
  }, []);

  let options: any = {
    data: [
      ["012301232", '23南电', 2000, 'AAA', 4000, 4000.00, '上交所', '城投', '北京', 1.9, 2.4],
      ["012301232", '24南电', 2000, 'b', 4000, 4000.00, '上交所', '城投', '杭州', 1.9, 2.4],
      ["012301232", '25南电', 2000, 'AAA', 4000, 4000.00, '上交所', '城投', '南京', 1.9, 2.4],
      ["012301232", '26南电', 2000, 'd', 4000, 4000.00, '上交所', '城投', '上海', 1.9, 2.4],
    ],
    columns: [
      {
        type: "text",
        title: "债券代码",
        width: "300",
        readOnly:true,
      },
      {
        type: "text",
        title: "债券简称",
        width: "150",
        readOnly:true,
      },
      {
        type: "text",
        title: "持仓数量",
        width: "100",
      },
      {
        type: "text",
        title: "内部评级",
        width: "100",
      },
      {
        type: "text",
        title: "票面金额（万元）",
      },
      {
        type: "text",
        title: "持仓市值（万元）",
      },
      {
        type: "text",
        title: "市场",
        width: "100",
      },
      {
        type: "text",
        title: "行业",
        width: "100",
      },
      {
        type: "text",
        title: "地区",
        width: "100",
      },
      {
        type: "text",
        title: "占净资产比例（%）",
      },
      {
        type: "text",
        title: "估值收益（%）",
        width: "100",
      },
      {
        type: "text",
        title: "到期日",
        width: "100",
      },
      {
        type: "text",
        title: "剩余天数",
        width: "100",
      },
    ],
    search:true,
    // minDimensions: [10, 5],
    // onselection: selectionActive, //选取单元格的事件
  };
  return (
    <PageWrapper>
      <div className={styles.cusTable} ref={(dom: HTMLDivElement) => (jexcelDom = dom)} />
      <br />
    </PageWrapper>
  );
};

export default CusXlsx;
